<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="100px">
      <el-form-item label="订单号" prop="altMchName">
        <el-input
          v-model="queryParams.altMchName"
          placeholder="请输入商户全称"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="客户名称" prop="busiContactName">
        <el-input
          v-model="queryParams.busiContactName"
          placeholder="请输入联系人姓名"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="签约时间" prop="busiContactMobileNo">
        <el-input
          v-model="queryParams.busiContactMobileNo"
          placeholder="请输入联系人手机号码"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>

      <el-form-item label="业务类型" prop="settMode">
        <el-select v-model="queryParams.settMode" placeholder="请选择结算方式" clearable size="small">
          <el-option
                v-for="dict in dict.type.sett_mode"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
           />
        </el-select>
      </el-form-item>
      <el-form-item label="客户类型" prop="settDateType">
        <el-select v-model="queryParams.settDateType" placeholder="请选择结算周期类型" clearable size="small">
          <el-option
                v-for="dict in dict.type.sett_date_type"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
           />
        </el-select>
      </el-form-item>
      <el-form-item label="业务员" prop="settMode">
        <el-select v-model="queryParams.settMode" placeholder="请选择结算方式" clearable size="small">
          <el-option
                v-for="dict in dict.type.sett_mode"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
           />
        </el-select>
      </el-form-item>
      <el-form-item label="所属部门" prop="settDateType">
        <el-select v-model="queryParams.settDateType" placeholder="请选择结算周期类型" clearable size="small">
          <el-option
                v-for="dict in dict.type.sett_date_type"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
           />
        </el-select>
      </el-form-item>
      <el-form-item style="margin-left:30px;">
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
        <el-button
          type="warning"
          plain
          icon="el-icon-download"
          size="mini"
          :loading="exportLoading"
          @click="handleExport"
          v-hasPermi="['splitaccount:account:export']"
        >导出</el-button>
      </el-form-item>
    </el-form>

    <el-table v-loading="loading" :data="accountList" @selection-change="handleSelectionChange">
      <el-table-column label="员工姓名" align="center" prop="loginName" />
      <el-table-column label="所属部门" align="center" prop="tenantCode" />
      <el-table-column label="签约业务类型" align="center" prop="tenantName" />
      <el-table-column label="签约总金额/元" align="center" prop="altMchNo" />
      <el-table-column label="签约客户类型" align="center" prop="altMchShortName" />
      <el-table-column label="签约客户名称" align="center" prop="busiContactName" />
      <el-table-column label="签约订单编号" align="center" prop="busiContactMobileNo" />
      <el-table-column label="签约时间" align="center" prop="legalPerson" />
      <el-table-column label="提成金额/元" align="center" prop="phoneNo" />
    </el-table>

    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />
  </div>
</template>

<script>
import { listAccount, getAccount, delAccount, addAccount, updateAccount, exportAccount,changeSplitAccountStatus,sign,auth,altMchQuery,altMchWithdrawal } from "@/api/commission/statistics"

export default {
  name: "Account",
  dicts: ['split_account_type','sett_mode','sett_date_type','bank_account_type','alt_merchant_type','account_type'],

  data() {
    return {
      // 遮罩层
      loading: true,
      // 导出遮罩层
      exportLoading: false,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 分账表格数据
      accountList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        altMchName: null,
        busiContactName: null,
        busiContactMobileNo: null,
        settMode: null,
        settDateType: null,
      },
      // 表单参数
      form: {},
      withdrawal:{},
      // 表单校验
      rules: {
          tenantCode: [
            { required: true, message: "商户号不能为空", trigger: "blur" }
          ],tenantName: [
            { required: true, message: "商户名称不能为空", trigger: "blur" }
          ],loginName: [
            { required: true, message: "分账方登录名不能为空", trigger: "blur" }
          ],altMerchantType: [
            { required: true,message: "分账方商户类型不能为空", trigger: "change" }
          ],altMchName: [
            { required: true, message: "分账方商户全称不能为空", trigger: "blur" }
          ],busiContactName: [
            { required: true, message: "业务联系人姓名不能为空", trigger: "blur" }
          ],busiContactMobileNo: [
            { required: true, message: "业务联系人手机不能为空", trigger: "blur" },
           {
             pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
             message: "请输入正确的电话",
             trigger: "blur"
           }
          ],legalPerson: [
            { required: true, message: "法人姓名不能为空", trigger: "blur" }
          ],phoneNo: [
            { required: true, message: "法人手机号不能为空", trigger: "blur" },
            {
              pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
              message: "请输入正确的电话",
              trigger: "blur"
            }
          ],idCardNo: [
            { required: true, message: "法人身份证号码不能为空", trigger: "blur" }
          ],settMode: [
            { required: true, message: "结算方式不能为空", trigger: "change"}
          ],bankAccountType: [
            { required: true, message: "结算账户类型不能为空", trigger: "change" }
          ],settDateType: [
            { required: true, message: "结算周期类型不能为空", trigger: "blur" }
          ],riskDay: [
            { required: true, message: "结算周期格式不正确", trigger: "blur" }
          ],splitAccountType: [
            { required: true, message: "分账类型不能为空", trigger: "change" }
          ],splitAccountTypeStr: [
            { required: true, message: "分账比例不正确", trigger: "blur" }
          ],bankAccountName: [
            { required: true, message: "银行账户名称不能为空", trigger: "blur" }
          ],bankAccountNo: [
            { required: true, message: "银行账号不正确", trigger: "blur" }
          ],accountType: [
            { required: true, message: "分账方类型不正确", trigger: "change" }
          ],cardPositive: [
            { required: true, message: "身份证正面不能为空", trigger: "blur" }
          ],cardNegative: [
            { required: true, message: "身份证反面不能为空", trigger: "blur" }
          ]
      }
    };
  },
  created() {
    this.getList();
  },
  methods: {
      // 更多操作触发
      handleCommand(command, row) {
        switch (command) {
          case "handleAltMchSign":
            this.handleAltMchSign(row);
            break;
          case "handleAltMchAuth":
            this.handleAltMchAuth(row);
            break;
          case "handleAltMchQuery":
            this.handleAltMchQuery(row);
            break;
          case "handleAltMchWithdrawal":
            this.handleAltMchWithdrawal(row);
            break;
          default:
            break;
        }
      },
      handleAltMchQuery(row){
        const altMchNo = row.altMchNo;
        this.$modal.confirm('确定要查询余额吗?').then(function() {
          return altMchQuery(altMchNo);
        }).then(() => {
          this.getList();
          this.$modal.msgSuccess("余额查询成功");
        }).catch(() => {});
      },
      handleAltMchWithdrawal(row){
        const altMchNo = row.altMchNo;
        this.$modal.confirm('确定要提现余额吗?').then(function() {
          return altMchWithdrawal(altMchNo);
        }).then(() => {
          this.getList();
          this.$modal.msgSuccess("余额提现成功");
        }).catch(() => {});
      },
      handleAltMchSign(row){
          const splitAccountId = row.splitAccountId;
          this.$modal.confirm('确定要执行签约操作吗?').then(function() {
              return sign(splitAccountId);
          }).then(() => {
            this.getList();
            this.$modal.msgSuccess("签约成功");
          }).catch(() => {});
      },
      handleAltMchAuth(row){
          const splitAccountId = row.splitAccountId;
          this.$modal.confirm('确定要执行认证操作吗?').then(function() {
              return auth(splitAccountId);
          }).then(() => {
            this.getList();
            this.$modal.msgSuccess("认证成功");
          }).catch(() => {});
      },


      // 删除身份证正面图片
      cardPositiveRemoveImage(file) {
        this.form.cardPositive = null;
      },
      // 上传成功身份证正面回调
      cardPositiveSuccessImage(res) {
        this.form.cardPositive = res.fileName;
        this.$refs['form'].validateField('cardPositive')
      },


      // 删除身份证反面图片
      cardNegativeRemoveImage(file) {
        this.form.cardNegative = null;
      },
      // 上传成功身份证反面回调
      cardNegativeSuccessImage(res) {
        this.form.cardNegative = res.fileName;
        this.$refs['form'].validateField('cardNegative')
      },


      // 删除营业执照图片
      tradeLicenceRemoveImage(file) {
        this.form.tradeLicence = null;
      },
      // 上传成功营业执照回调
      tradeLicenceSuccessImage(res) {
        this.form.tradeLicence = res.fileName;
        this.$refs['form'].validateField('tradeLicence')
      },


      // 删除开户许可证图片
      openAccountLicenceRemoveImage(file) {
        this.form.openAccountLicence = null;
      },
      // 上传成功开户许可证回调
      openAccountLicenceSuccessImage(res) {
        this.form.openAccountLicence = res.fileName;
        this.$refs['form'].validateField('openAccountLicence')
      },

    /** 查询分账列表 */
    getList() {
      this.loading = true;
      listAccount(this.queryParams).then(response => {
        this.accountList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        splitAccountId: null,
        loginName: null,
        altMchName: null,
        altMchShortName: null,
        altMerchantType: null,
        busiContactName: null,
        busiContactMobileNo: null,
        phoneNo: null,
        manageScope: null,
        manageAddr: null,
        legalPerson: null,
        idCardNo: null,
        idCardExpiry: null,
        licenseNo: null,
        licenseExpiry: null,
        settMode: null,
        settDateType: null,
        riskDay: null,
        bankAccountType: null,
        bankAccountName: null,
        bankAccountNo: null,
        bankChannelNo: null,
        altMchNo: null,
        orderStatus: null,
        authStatus: null,
        approveStatus: null,
        tenantCode: null,
        tenantName: null,
        accountType: null,
        cardPositive: null,
        cardNegative: null,
        tradeLicence: null,
        openAccountLicence: null,
        otherOne: null,
        otherTwo: null,
        splitAccountType: null,
        splitAccountStatus: null,
        splitAccountTypeStr: null,
        delFlag: null,
        createBy: null,
        createTime: null,
        updateBy: null,
        updateTime: null,
        remark: null
      };
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.splitAccountId)
      this.single = selection.length!==1
      this.multiple = !selection.length
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      this.open = true;
      this.title = "添加分账";
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset();
      const splitAccountId = row.splitAccountId || this.ids
      getAccount(splitAccountId).then(response => {
        this.form = response.data;
        this.open = true;
        this.title = "修改分账";
      });
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.form.splitAccountId != null) {
            updateAccount(this.form).then(response => {
              this.$modal.msgSuccess("修改成功");
              this.open = false;
              this.getList();
            });
          } else {
            addAccount(this.form).then(response => {
              this.$modal.msgSuccess("新增成功");
              this.open = false;
              this.getList();
            });
          }
        }
      });
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const splitAccountIds = row.splitAccountId || this.ids;
      this.$modal.confirm('是否确认删除数据项？').then(function() {
        return delAccount(splitAccountIds);
      }).then(() => {
        this.getList();
        this.$modal.msgSuccess("删除成功");
      }).catch(() => {});
    },
    /** 导出按钮操作 */
    handleExport() {
      const queryParams = this.queryParams;
      this.$modal.confirm('是否确认导出所有分账数据项？').then(() => {
        this.exportLoading = true;
        return exportAccount(queryParams);
      }).then(response => {
        this.$download.name(response.msg);
        this.exportLoading = false;
      }).catch(() => {});
    },
    // 状态修改
    handleStatusChange(row) {
      let text = row.splitAccountStatus === "0" ? "启用" : "停用";
      this.$modal.confirm('确认要"' + text + '""' + row.tenantName + '"分账方吗？').then(function() {
        return changeSplitAccountStatus(row.splitAccountId, row.splitAccountStatus);
      }).then(() => {
        this.$modal.msgSuccess(text + "成功");
      }).catch(function() {
        row.splitAccountStatus = row.splitAccountStatus === "0" ? "1" : "0";
      });
    },
  }
};
</script>
<style scoped lang="scss">
.el-upload .el-upload--picture-card {
    width: 248px;
}

</style>
